<template>
  <div class="app-container">
    <el-form :model="selectForm" ref="queryForm" :inline="true" label-width="90px">
      <el-form-item label="盘点日期">
        <el-date-picker
          v-model="selectDate"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="dateSelect"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="盘点单号" >
        <el-input
          v-model="selectForm.checkCode"
          placeholder="请输入盘点单号"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="盘点筛选" >
        <el-select
          v-model="selectForm.rangeType"
          placeholder="请选择"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in statuspdOptions"
            :key="dict.dictValue"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>

      </el-form-item>
      <el-form-item label="责任人" >
        <el-select
          v-model="selectForm.chargeUserId"
          placeholder="请选择"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="item in zrrOptions"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" >
        <el-select
          v-model="selectForm.statusId"
          placeholder="请选择"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>

      </el-form-item>
      <!-- <el-form-item>
        <el-checkbox v-model="queryParams.checked" >我的盘点</el-checkbox>
      </el-form-item>-->
      <el-form-item> 
        <el-button type="primary" icon="el-icon-search" size="mini" @click="selectForm.pageNum=1;getList();">搜索</el-button>
        <el-button type="success" icon="el-icon-plus" size="mini" @click="cgjhadd">添加</el-button>
        <el-button type="warning" icon="el-icon-download" size="mini" @click="listImport">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list" stripe >
      <el-table-column align="center" type="index" label="序号"  width="55"  />
      <el-table-column align="center" label="盘点单号" property="checkCode" width="150" >
        <template slot-scope="scope" style="text-align: center">
          <span style="color: #2196F3;cursor: pointer" @click="xingqing(scope.row.id)">{{scope.row.checkCode}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建人"   property="createUserName" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column label="创建时间" property="createTime" align="center"  width="180"></el-table-column>
      <el-table-column label="盘点时间" property="checkTime" align="center"  width="180"></el-table-column>
      <el-table-column align="center" label="盘点范围" property="rangeType" :show-overflow-tooltip="true" width="150" >
        <template slot-scope="scope">
          {{scope.row.rangeType|rangeType}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="计划盘点时间" :show-overflow-tooltip="true" width="150" >
        <template slot-scope="scope">
          <span>{{ scope.row.planStart }}~{{scope.row.planEnd}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="责任人"  property="chargeUserName" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="状态"  property="statusId" :show-overflow-tooltip="true" width="150" >
        <template slot-scope="scope" style="text-align: center">
          <div class="pd-btn" style="background:#E83672;" v-show="scope.row.statusId=='0'" >未开始</div>
          <div class="pd-btn" style="background:#78BF34;" v-show="scope.row.statusId=='2'">已盘点</div>
          <div class="pd-btn" style="background:#DEA11E;" v-show="scope.row.statusId=='1'">执行中</div>
          <div class="pd-btn" style="background:#358AEF;" v-show="scope.row.statusId=='3'">待执行</div>
          <div class="pd-btn" style="background:#9E71DC;" v-show="scope.row.statusId=='4'">已过期</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="应盘数"  property="mayNum" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column align="center" label="盘存数" property="saveNum"  :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="250">
        <template slot-scope="scope">
          <el-button
            v-show="scope.row.statusId!='2'&&scope.row.statusId!='4'"
            size="mini"
            type="success"
            icon="el-icon-refresh-left"
            @click="handleDelete(scope.$index, scope.row)">重新分派</el-button>
          <el-button
            v-show="scope.row.statusId=='0'"
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button
            v-show="scope.row.statusId=='1'&&scope.row.chargeUserId"
            size="mini"
            type="warning"
            icon="el-icon-video-play"
            @click="handleNext(scope.$index, scope.row)">继续盘点</el-button>


        </template>
      </el-table-column>
    </el-table>

    <pagination
      :total="total"
      :page.sync="selectForm.pageNum"
      :limit.sync="selectForm.pageSize"
      @pagination="getList"
    />
    <!--    选择负责人-->
    <head-Dialog v-if="fzrShow" @chooseDepartmen="fzrBack" @closeDepartmen="fzrShow = false"></head-Dialog>
  </div>
</template>

<script>
  import headDialog from "./headDialog"
  import {inventoryList,listUser,transfer,inventoryExport} from '@/api/inventory/index'
  export default {
    name: "Role",
    components:{
      headDialog,
    },
    data() {
      return {
        fzrData:{},//负责人数据
        fzrShow:false,//负责人
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 表格数据
        list: [],
        // 日期范围
        dateRange: [],
        //责任人
        zrrOptions:[],
        //状态
        statusOptions:[
          { value: '0',label: '未开始'},
          { value: '2',label: '已盘点'},
          { value: '1',label: '执行中'},
          { value: '3',label: '待执行'},
          { value: '4',label: '已过期'},
        ],
        // 盘点筛选
        statuspdOptions: [
          { value: '1',label: '所有人'},
          { value: '2',label: '责任人'},
          { value: '3',label: '指定所在部门'},
          { value: '4',label: '指定所在位置'},
          { value: '5',label: '指定设备类别'},
        ],
        
        // 菜单列表
        menuOptions: [],
        // 部门列表
        deptOptions: [],
        // 查询参数
        selectForm: {
          pageNum: 1,
          pageSize: 10,
          chargeUserId: null,
          checkCode: null,
          createUserId: null,
          planEnd:null,
          planStart: null,
          rangeType: null,
          statusId: null
        },
        selectDate: null,
        // 表单参数
        form: {},
        id: null,
        defaultProps: {
          children: "children",
          label: "label"
        },
      };
    },
    created() {
      this.getUserList()
      this.getList()
    },
    methods: {
      listImport(){
        //导出
        this.$confirm('是否确认导出?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let res = await inventoryExport(this.selectForm)
          return this.download(res.data)
        }).catch(function() {
        })
      },
      dateSelect() {
        this.selectForm.planStart = this.selectDate&&this.selectDate[0]||null
        this.selectForm.planEnd = this.selectDate&&this.selectDate[1]||null
      },
      getUserList(){
        //获取负责人列表
        listUser().then((res)=>{
          if(res.code==200){
            this.zrrOptions = res.rows
          }
        })
      },
      /** 查询盘点列表 */
      getList() {
        this.loading = true;
        inventoryList(this.selectForm).then((res)=>{
          if(res.code==200){
            this.list = res.rows
            this.total = res.total
            this.loading = false
          }
        }) 
      },
      //编辑
      handleEdit:function (index,row) {
       
        this.$router.push({path:'/equipmentGL/InventoryList',query:{id:row.id}});
      },
      //继续盘点
      handleNext(index,row){
        this.$router.push({path:'/equipmentGL/InventoryNext',query:{id:row.id}});
      },
      //重新分派
      handleDelete:function (index,row) {
        this.id = row.id
        this.fzrShow = true

      },
      //负责人回调函数
      fzrBack:function (row) {
        let obj={
          uid:String(row),
          id:String(this.id)
        }
        transfer(obj).then((res)=>{
          if(res.code==200){
            this.$message.success(res.msg)
            this.getList()
          }
        })
        this.fzrShow = false
      },


      //创建盘点单
      cgjhadd:function () {
        console.log('tianjia')
        this.$router.push({path:'/equipmentGL/InventoryList',query:{userid:'55555'}});
      },
      //详情点击
      xingqing:function (id) {
        this.$router.push({path:'/equipmentGL/InventoryDetails',query:{id}});
      },


    },
    filters:{
      rangeType(val){
        let str
        switch (val) {
          case '1':
            str = '所有'
            break;
          case '2':
            str = '负责人'
            break;
          case '3':
            str = '指定部门'
            break;
          case '4':
            str = '指定位置'
            break;
          case '5':
            str = '指定分类'
            break;
          default:
            break;
        }
        return str
      }
    }
  };
</script>
<style scoped>
.pd-btn{
  color: white;
  width: 54px;
  height: 22px;
  display: inline-block;
}
</style>
